<template>
	<div id="index">=
		<div class="fixed-bar">
        <mu-appbar>
          <div class="logo" slot="left"></div>
          <mu-icon-button icon='menu' slot="left"/>
          <mu-icon-button icon='add' slot="right"/>
        </mu-appbar>
		<mu-tabs :value="activeTab" @change="handleTabChange" class="view-tabs">
        <mu-tab value="birthdayList" title="生日"/>
        <mu-tab value="memorialdayList" title="纪念日"/>
		</mu-tabs>
		</div>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
      
<!-- 		<div class="default-view" :class="{view: birthday.length > 0}">
		  <keep-alive>
		    <router-view></router-view>
		  </keep-alive>
		</div> -->
	</div>
</template>

<script type="text/javascript">
    export default{
    	data (){
    		return {
    			activeTab: 'birthdayList'
    		}
    	},
    	methods: {
    		handleTabChange(val){
    			this.activeTab = val
          this.$router.push({ path: '/index/' + val })
    		}
    	}
    }
</script>

<style type="text/css">
    .view-tabs {
    background-color: #fff;
    color: rgba(0,0,0,.87);
    >.mu-tab-link {
      color: rgba(102,102,102,1);
    }
    >.mu-tab-active{
      color: @primaryColor;
    }
  }

  .fixed-bar {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    z-index: 15;
  }
  .default-view {
    margin-top: 104px;
  }
  .view {
    margin-bottom: 2.3rem;
  }
</style>